<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script src="scripts/dropzone.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles/basic.min.css" />
	<link rel="stylesheet" type="text/css" href="styles/dropzone.min.css" />

</head>
<body>
	<div class="form-group">
	    <label class="title">真人照(最多只能传一张)</label>
	    <div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓
	</div>
	<input type="hidden" name="file_id" ng-model="file_id" id="file_id"/>
    <!--<h1>&#45;&#45;test</h1>-->
    <!--<form action="/manage/product/richtext_img_upload.do" class="dropzone" id="dropz">-->
        <!--<div class="fallback">-->
            <!--<input name="upload_file" type="file" multiple />-->
        <!--</div>-->
    <!--</form>-->
</body>
	<script type="text/javascript">
        imgArr = new Array();
        fileArr = new Array();
//		var appElement = document.querySelector('div .inmodal');
    	var myDropzone = new Dropzone("#dropz", {
        url: "/manage/product/richtext_img_upload.do",//文件提交地址
        method:"post",  //也可用put
        paramName:"upload_file", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks:true,
        parallelUploads: 10,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传10个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init:function(){
            this.on("addedfile", function(file) {
                //上传文件时触发的事件
                //document.querySelector('div .dz-default').style.display = 'none';
            });
            this.on("success",function(file,data){
                //上传成功触发的事件
                console.log('ok');
                console.log(data.success);
                console.log(data.msg);
                console.log(data.file_path);
                imgArr.push(data.file_path);
                fileArr.push(file);
                console.log(imgArr.join(","));
                //angular.element(appElement).scope().file_id = data.data.id;
            });
            this.on("error",function (file,data) {
                //上传失败触发的事件
                console.log('fail');
                console.log(data.msg);
                console.log(data.success);
                var message = '';
                //lavarel框架有一个表单验证，
                //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
//                if (file.accepted){
//                    $.each(data,function (key,val) {
//                        message = message + val[0] + ';';
//                    })
//                    //控制器层面的错误提示，file.accepted = true的时候；
//                    alert(message);
//                }
            });
            this.on("removedfile",function(file){
                //删除文件时触发的方法
//                var file_id = angular.element(appElement).scope().file_id;
//                if (file_id){
//                    $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
//                        console.log('删除结果:'+data.message);
//                    })
//                }
//                //angular.element(appElement).scope().file_id = 0;
//                document.querySelector('div .dz-default').style.display = 'block';
                console.log('removedfile');
                for (var i=0;i<imgArr.length;i++){
                    if(fileArr[i] == file){
                        fileArr.splice(i,1);
                        imgArr.splice(i,1);
                    }
                }
                console.log(imgArr.join(","));
            });
        }
    });
	</script>
</html>